<template>
    <div class="container">
        <div class="wrapper" :style="style"  v-if="mode == 'exam'">
            <div class="questions">
                <div class="question" :class="{'correct': question.correct === true,'incorrect': question.correct === false}" v-for="(question, idx) in questions" :key="idx">
                    <template v-if="question.postion == -1">
                        <div class="title" v-if="question.bracket">{{question.c}}<span class="symbol">×</span><span class="bracket">(</span>{{question.a}}<span class="symbol">{{question.symbol}}</span>{{question.b}}<span class="bracket">)</span></div>
                        <div class="title" v-else>{{question.c}}<span class="symbol padding">×</span>{{question.b}}<span class="symbol padding">{{question.symbol}}</span>{{question.a}}</div>
                    </template>
                    <template v-else>
                        <div class="title" v-if="question.bracket"><span class="bracket">(</span>{{question.a}}<span class="symbol">{{question.symbol}}</span>{{question.b}}<span class="bracket">)</span><span class="symbol">×</span>{{question.c}}</div>
                        <div class="title" v-else>{{question.a}}<span class="symbol padding">{{question.symbol}}</span>{{question.b}}<span class="symbol padding">×</span>{{question.c}}</div>
                    </template>
                    
                    <div class="equals" @dblclick="question.showAnswer = true">=</div>
                    <div class="answer">
                        {{ question.showAnswer ? question.r:'' }}
                        <div class="judge-box" v-if="question.showAnswer">
                            <button class="btn btn-correct" @click="question.correct = true">对</button>
                            <button class="btn btn-incorrect" @click="question.correct = false">错</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tool-bar">
                <button class="btn btn-next" @click="next">下一批</button>
                <button class="btn btn-answer" @click="showAnswer()">查看答案</button>
                <button class="btn btn-save" @click="save()">存档</button>
                <button class="btn btn-archive" @click="archive()">查看存档</button>
            </div>
        </div>
        <div class="wrapper" :style="style"  v-else-if="mode == 'archive'">
            <div class="questions" v-if="archives.length > 0">
                <div class="question" :class="{'correct': question.correct === true,'incorrect': question.correct === false}" v-for="(question, idx) in archiveData.questions" :key="idx">
                    <template v-if="question.postion == -1">
                        <div class="title" v-if="question.bracket">{{question.c}}<span class="symbol">×</span><span class="bracket">(</span>{{question.a}}<span class="symbol">{{question.symbol}}</span>{{question.b}}<span class="bracket">)</span></div>
                        <div class="title" v-else>{{question.c}}<span class="symbol padding">×</span>{{question.b}}<span class="symbol padding">{{question.symbol}}</span>{{question.a}}</div>
                    </template>
                    <template v-else>
                        <div class="title" v-if="question.bracket"><span class="bracket">(</span>{{question.a}}<span class="symbol">{{question.symbol}}</span>{{question.b}}<span class="bracket">)</span><span class="symbol">×</span>{{question.c}}</div>
                        <div class="title" v-else>{{question.a}}<span class="symbol padding">{{question.symbol}}</span>{{question.b}}<span class="symbol padding">×</span>{{question.c}}</div>
                    </template>
                    
                    <div class="equals" @dblclick="question.showAnswer = true">=</div>
                    <div class="answer">
                        {{ question.showAnswer ? question.r:'' }}
                    </div>
                </div>
            </div>
            <div class="tool-bar">
                <button class="btn btn-date" :disabled="true">{{ archiveData.date }}</button>
                <button class="btn btn-prev" :disabled="archiveIndex == 0" @click="archiveIndex = archiveIndex - 1">上一页</button>
                <button class="btn btn-next" :disabled="archiveIndex == archives.length - 1" @click="archiveIndex = archiveIndex + 1">下一页</button>
                <button class="btn btn-back" @click="back()">返回</button>
            </div>
        </div>

    </div>  
  </template>
  
  <script>

  import moment from 'moment';
  
  export default {
    name: 'MixPage',
    data(){
      return {
        mode: 'exam',
        archives: [],
        archiveIndex: 0,
        appSize: {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        },
        timestamp: new Date().getTime(),
        questions: []
      }
    },
    mounted(){
      this.next();
    },
    watch: {
        '$store.state.app.appSize':{
            handler(val){
                if(val){
                    
                    this.appSize = {
                        width : val.width,
                        height : val.height
                    }
                }
                
            },
            immediate: true
        }
    },
    computed:{
        style(){
            let scale = this.appSize.width / 1920;
            return  `transform:scale(${scale}) translateY(-50%)`
        },
        archiveData(){
            return this.archives[this.archiveIndex] || {questions:[]};
        }
    },
    methods:{
      next(){
        this.timestamp = new Date().getTime();
        const len = 10;
        let questions = [];
        for(let i =0; i< len; i++){
            questions.push(this.generate());
        }
        this.questions = questions;
      },
      back(){
        this.mode = 'exam';
      },
      archive(){
        let keys = Object.keys(localStorage);
        let archives = [];
        keys.forEach(key => {
            if(key.startsWith('archive-')){
                let timestamp = parseInt(key.substring(8));
                let questions = JSON.parse(localStorage.getItem(key));
                questions.forEach(question =>{
                    question.showAnswer = true;
                    question.correct = question.correct ? true : false
                });
                archives.push({
                    timestamp,
                    date: moment(timestamp).format('YYYY-MM-DD HH:mm'),
                    questions
                });
            }
        })
        archives.sort((a, b) => {
            return a.timestamp > b.timestamp ? -1: 1;
        })
        this.archives = archives;
        console.log(this.archives)
        this.mode = 'archive';
      },
      save(){
        localStorage.setItem('archive-' + this.timestamp, JSON.stringify(this.questions));
        alert('存档成功')
      },
      showAnswer(){
        this.questions.forEach(question => {
            question.showAnswer = true;
        })
      },
      generate(){
        let a = 10 + Math.floor(Math.random() * 90);
        let b = 2 + Math.floor(Math.random() * 8);
        let c = b < 4 ? (5 + Math.floor(Math.random() * 5)) : (2 + Math.floor(Math.random() * 8));

        if(a == b || b == c || c == a){
            return this.generate();
        }

        const symbol = Math.random() > 0.5 ? '+' : '-';
        const bracket = Math.random() > 0.5 ? true : false;
        const postion = Math.random() > 0.5 ? -1 : 1;


        let data = {
            a: a,
            b: b,
            c: c,
            r: 0,
            symbol: symbol,
            bracket: bracket,
            postion: postion, // 1 顺序  -1 倒序
            showAnswer: false,
            correct: null
        }

        // 使用括号
        if(bracket){
            if(symbol == '-'){
                if(a < b){
                   data.a = b;
                   data.b = a;
                }
                if(data.a - data.b > 9){
                    return this.generate();
                }
                data.r = (data.a - data.b) * data.c;
            }
            else{
                if(data.a + data.b > 9){
                    return this.generate();
                }
                data.r = (data.a + data.b) * data.c;
            }
        }
        else{
            let e = b * c;
            if(symbol == '-'){
                data.postion = a > b * c ? 1 : -1;        
                data.r = Math.abs(a - e);
            }
            else{
                data.r = data.a + data.b * data.c;
            }

        }
        



        if(data.r > 100 || data.r < 0){
            return this.generate(); 
        }
        //console.log(data);
        return data;
      }
    }
   
  }
  </script>
  
  <style scoped>
   .container{
    background: #044c40;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding-top:80px;
    padding-bottom: 40px;
   }
   .wrapper{
    margin: auto;
    width: 1920px;
    transform-origin: left top;
    position: fixed;
    left: 0;
    top: 50%;
   }
    .questions{
        font-family:'Courier New', Courier, monospace;
        font-weight: bold;
        display: flex;
        flex-wrap: wrap;
        width: 1800px;
        margin:0 auto;
        color: #FFFFFF;
    }
    .question{
        font-size: 100px;
        width: 50%;
        display: flex;
        align-items:center;
        justify-content: center;
        line-height: 120px;
        box-sizing: border-box;
        border: 1px solid #044c40;

        .title{

            text-align: left;
        }

        &.correct{
            background-color: rgba(128, 219, 119, 0.5);
        }
        &.incorrect{
            background-color: rgba(231, 69, 101, 0.5);
        }
      
    }
    .symbol{
        color:rgb(230, 127, 48);
        margin:0 10px;
    }
    .equals{
        margin:0 20px;
        color:rgb(230, 127, 48);
        cursor: pointer;
    }
    .answer{
        color:rgb(232, 228, 161);
        width: 120px;
        text-align: right;
        position: relative;

        .judge-box{
            display: none;
            position: absolute;
            bottom: 0px;
            width: 120px;
            line-height: 30px;
            

            .btn{
                width: 50%;
                border: none;
                background-color: #1890ff;
                color: #FFFFFF;
                line-height: 0.8;
                font-size: 16px;
                cursor: pointer;
                line-height: 30px;
                text-align: center;
                padding: 0;

                &.btn-correct{
                    background-color:  rgb(128, 219, 119);
                }

                &.btn-incorrect{
                    background-color: rgb(231, 69, 101);
                }


            }
        }
        &:hover{
            .judge-box{
                display: flex;
            }
        }
    }

    .tool-bar{
        margin: 50px auto;

        .btn{
            border: none;
            background-color: #1890ff;
            color: #FFFFFF;
            padding: 10px 40px;
            line-height: 1.5;
            font-size: 30px;
            cursor: pointer;

            border-right: 1px solid #044c40;

            &:last-child{
                border-right: none;
            }

            

            &:disabled{
                background:rgba(24, 24, 24, 0.5);
                cursor: default;
            }
            &.btn-date{
                background:rgba(24, 144, 255, 0.5);
                color: rgb(230, 127, 48);
            }
           
        }

    }
    

    .bracket{
        padding:0px;
        color: rgb(234, 92, 92);
    }

    .padding{
        padding:30px;
    }

    


    
  </style>
  